<template>
  <div class="func-comp-form">
    <Form :label-width="105">
      <FormItem label="栅格间距">
        <InputNumber size="small" :max="1000" :min="0" v-model="gutter" active-change></InputNumber> px
      </FormItem>

      <FormItemPanel title="栅格列配置">
        <FormItem v-for="(child, index) in children" :key="index" :label="'栅格列'+(index+1)+'宽度'">
          <InputNumber size="small" :max="24" :min="1" :step="1" v-model="child.component.compConfigData.span" :active-change="false"/>
          <a class="m-l-5px" href="javascript:;" style="color: #fff;" @click="deleteCol(index)"><Icon type="md-trash" /></a>
        </FormItem>
        <FormItem>
          <Button size="small" type="primary" @click="addCol">添加栅格列</Button>
        </FormItem>
      </FormItemPanel>
    </Form>
  </div>
</template>

<script>
import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'
import { createHelpers } from 'vuex-map-fields';

const { mapFields } = createHelpers({
  getterType: 'designer/getLayoutItemFromTree',
  mutationType: 'designer/updateLayoutItemFromTree',
});
export default {
  name: "GridWidgetForm",
  // mixins: [FuncCompFormMixin],
  data() {
    return {}
  },
  mounted() {

  },
  methods: {
    addCol() {
      this.children.push(this.$FormDesignerCommonUtil.buildGridColContainerLayoutItem())
    },
    deleteCol(index) {
      this.children.splice(index, 1)
    }
  },
  computed: {
    ...mapFields({

      gutter: 'component.compConfigData.gutter',
      children: 'children'

    })
  },
  watch: {}
}
</script>

<style scoped>

</style>
